<template>
  <div class="dataStatistics">
    <div class="statisTitle">
      <p class="statisName">出块</p>
      <div class="barWrap">
        <a-row>
          <a-col :span="17">
            <div id="statisBar"></div>
          </a-col>
          <a-col :span="7">
            <a-table :columns="columns1" :data-source="data1" :pagination="false" :scroll="{ y: 300 }"
                     style="height: 350px" :rowKey="rowKey">
            <span slot="miner" slot-scope="text, record,index">
              <img style="width:18px;heigth:20px" src="../assets/01.png" v-if="index=='0'"/>
              <img style="width:18px;heigth:20px" src="../assets/02.png" v-if="index=='1'"/>
              <img style="width:18px;heigth:20px" src="../assets/03.png" v-if="index=='2'"/>
              <span v-if="index > 2" style="margin-left: 5px">{{index + 1}}</span>
              <span style="margin-left: 10px">{{record.miner}}</span>
            </span>
            </a-table>
          </a-col>
        </a-row>
      </div>
    </div>
    <div>
      <div style="display: flex;justify-content: space-between;align-items: baseline">
        <p class="statisName">矿工列表</p>
        <div class="btnWrap">
          <div :class="flag?'bgcBtn':''" @click="changeTable('first')">有效算力</div>
          <div :class="!flag?'bgcBtn':''" @click="changeTable('second')">出块数</div>
        </div>
      </div>
      <div class="tableList">
        <a-table :columns="columns2" :data-source="data2" :rowKey="rowKey">
          <span slot="name" slot-scope="text, record,index">
            <img style="width:26px;heigth:28px" src="../assets/01.png" v-if="index=='0'"/>
            <img style="width:26px;heigth:28px" src="../assets/02.png" v-if="index=='1'"/>
            <img style="width:26px;heigth:28px" src="../assets/03.png" v-if="index=='2'"/>
            <span v-if="index > 2" style="margin-left: 10px">{{index + 1}}</span>
            <span style="margin-left: 10px">{{record.name}}</span>
          </span>
          <span slot="age" slot-scope="text, record,index">
            <span>{{record.name}}</span>
            <img style="width:20px;heigth:20px;margin-left: 10px" src="../assets/04.png" v-if="index < 3"/>
          </span>
        </a-table>
        <a-button type="link" block style="text-align: right">
          查看更多>>
        </a-button>
      </div>
    </div>
  </div>
</template>

<script>
  import * as echarts from "echarts";
  import { getBlockCharts } from '../serves/index'

  const columns1 = [
    {
      title: '矿工编号',
      dataIndex: 'miner',
      key: 'miner',
      ellipsis: true,
      scopedSlots: {customRender: 'miner'},
    },
    {
      title: '爆块力',
      dataIndex: 'ticketRate',
      key: 'ticketRate',
      width: 100,
      ellipsis: true,
    },
    {
      title: '算力',
      dataIndex: 'power',
      key: 'power',
      ellipsis: true,
    }
  ]
  const columns2 = [
    {
      title: '矿工地址',
      dataIndex: 'name',
      key: 'name',
      scopedSlots: {customRender: 'name'},
    },
    {
      title: '标签',
      dataIndex: 'age',
      key: 'age',
      scopedSlots: {customRender: 'age'},
    },
    {
      title: '有效算力',
      dataIndex: 'address1',
      key: 'address1',
      ellipsis: true,
    },
    {
      title: '有效算力占比',
      dataIndex: 'address2',
      key: 'address2',
      ellipsis: true,
    },
    {
      title: '24h出块奖励',
      dataIndex: 'address3',
      key: 'address3',
      ellipsis: true,
    },
    {
      title: '24h挖矿效率',
      dataIndex: 'address4',
      key: 'address4',
      ellipsis: true,
    },
    {
      title: '24h算力增量',
      dataIndex: 'address5',
      key: 'address5',
      ellipsis: true,
    },
  ]
  const data2 = [
    {
      key: '1',
      name: 'f01248',
      age: '智合云(ZH)',
      address1: '75.48 PiB',
      address2: '2.42%',
      address3: '7,847.5044 FIL',
      address4: '0.1014 FIL/TiB',
      address5: '-116.00 TiB',
    },
    {
      key: '2',
      name: 'f01248',
      age: '智合云(ZH)',
      address1: '75.48 PiB',
      address2: '2.42%',
      address3: '7,847.5044 FIL',
      address4: '0.1014 FIL/TiB',
      address5: '-116.00 TiB',
    },
    {
      key: '3',
      name: 'f01248',
      age: '智合云(ZH)',
      address1: '75.48 PiB',
      address2: '2.42%',
      address3: '7,847.5044 FIL',
      address4: '0.1014 FIL/TiB',
      address5: '-116.00 TiB',
    },
    {
      key: '4',
      name: 'f01248',
      age: '智合云(ZH)',
      address1: '75.48 PiB',
      address2: '2.42%',
      address3: '7,847.5044 FIL',
      address4: '0.1014 FIL/TiB',
      address5: '-116.00 TiB',
    },
  ]
  export default {
    name: "DataStatistics",
    data() {
      return {
        columns1,
        data1: [],
        columns2,
        data2,
        flag: true,
        timer: null
      }
    },
    mounted() {
      this.getBarCharts()
    },
    beforeDestroy() {
      clearTimeout(this.timer)
    },
    methods: {
      getBarCharts() {
        getBlockCharts().then(res => {
          if (res.status == 200 && res.data.code == 200) {
            let chartData = res.data.data
            this.data1 = chartData.minerBlockRate
            this.data1.forEach(el => {
              el.power = `${el.power}(${el.powerRate})`
            })
            let xAxisData = chartData.heights
            let series = []
            chartData.minerBlocks.forEach(el => {
              series.push({
                name: el.miner,
                type: 'bar',
                stack: '出块',
                data: el.data
              })
            })
            let data = {xAxisData, series}
            this.drawBar(data)
          }
        })
        this.timer = setTimeout(() => {
          this.getBarCharts()
        }, 1000 * 10)
      },
      drawBar(data) {
        let myChart = echarts.init(document.getElementById('statisBar'));
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              align: 'left'
            },
            formatter: (params) => {
              let texts = []
              params.forEach(el => {
                if (el.value) {
                  texts.push(`${el.marker}${el.seriesName}：${el.value}`)
                }
              })
              return texts.join('<br/>')
            }
          },
          legend: {show: false},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              axisLabel: {
                rotate: 40
              },
              data: data.xAxisData
            }
          ],
          yAxis: [
            {
              type: 'value',
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#DCE2E8'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#000'
                }
              },
              splitNumber: 4,
              splitLine: {
                show: true
              }
            }
          ],
          series: data.series
        }
        myChart.setOption(option, true);
      },
      changeTable(val) {
        if (val == 'first') {
          this.flag = true
        } else {
          this.flag = false
        }
      },
      rowKey(record, index) {
        return index
      }
    }
  }
</script>

<style lang="scss">
  .dataStatistics {
    padding: 10px;
    margin: 0px 100px;

    .statisTitle {
      margin: 30px 0px;

      .ant-table-tbody > tr > td {
        padding: 5px;
        font-weight: 700;
      }

      #statisBar {
        height: 350px;
      }
    }

    .barWrap {
      box-shadow: 0px 5px 20px 0px rgba(56, 12, 244, 0.08);
      border-radius: 4px 0 0 4px
    }

    .statisName {
      font-size: 24px;
      font-weight: 700;
      text-align: left;
    }

    .btnWrap {
      display: flex;
      margin: 10px;

      div {
        width: 150px;
        font-weight: 700;
        font-size: 16px;
        padding: 10px 15px;
        background-color: #F5F3FE;
        color: #380CF4;
        border: none;
        cursor: pointer;
        position: relative;
      }

      div:nth-child(1) {
        border-right: none;
        border-radius: 30px;
        left: 15px;
      }

      div:nth-child(2) {
        border-radius: 30px;
        left: -15px;
      }


      .bgcBtn {
        background-color: #380CF4 !important;
        color: #fff;
        z-index: 10;
      }
    }

    .tableList {
      .ant-table-thead {
        tr {
          font-size: 20px;
        }
      }

      .ant-table-tbody {
        tr {
          font-size: 18px;
        }

        tr:nth-child(even) {
          background-color: #f1f2f1;
        }
      }

    }
  }

  @media screen and (max-width: 800px) {
    .dataStatistics {
      padding: 10px;
      margin: 10px;

      .statisTitle {
        margin: 30px 0px;

        .ant-table-tbody > tr > td {
          padding: 5px;
          font-weight: 700;
        }

        #statisBar {
          height: 250px;
        }
      }

      .barWrap {
        .ant-col-17 {
          width: 100%;
        }

        .ant-col-7 {
          width: 100%;
        }
      }

      .statisName {
        font-size: 14px;
        font-weight: 700;
        text-align: left;
      }

      .btnWrap {
        display: flex;
        margin: 10px;

        div {
          width: 80px;
          font-weight: 700;
          font-size: 12px;
          padding: 5px;
          background-color: #F5F3FE;
          color: #380CF4;
          border: none;
          cursor: pointer;
          position: relative;
        }

        div:nth-child(1) {
          border-right: none;
          border-radius: 30px;
          left: 10px;
        }

        div:nth-child(2) {
          border-radius: 30px;
          left: -5px;
        }


        .bgcBtn {
          background-color: #380CF4 !important;
          color: #fff;
          z-index: 10;
        }
      }

      .tableList {
        .ant-table-thead {
          tr {
            font-size: 12px;
          }

          th {
            padding: 0px;
          }
        }

        .ant-table-tbody {
          tr {
            font-size: 12px;
          }

          td {
            padding: 0px;
          }
        }

      }
    }
  }

</style>
